<template>
  <div class="container">
    <!-- Other unchanged code -->

    <div class="profile-section">
      <image-preview :src="dataList.picture" :width="120" :height="120" class="profile-picture"/>
    </div>

    <div class="details-section">
      <div class="details-column">
        <el-row class="detail-row">
          <el-col :span="8" class="label-col">姓名</el-col>
          <el-col :span="16" class="value-col">{{ dataList.tName }}</el-col>
        </el-row>
        <el-row class="detail-row">
          <el-col :span="8" class="label-col">电话</el-col>
          <el-col :span="16" class="value-col">{{ dataList.phone }}</el-col>
        </el-row>
        <el-row class="detail-row">
          <el-col :span="8" class="label-col">性别</el-col>
          <el-col :span="16" class="value-col">
            {{ dataList.sex === 0 || dataList.sex === '0' ? '男' : dataList.sex === 1 || dataList.sex === '1' ? '女' : '未知' }}
          </el-col>
        </el-row>
      </div>

      <div class="details-column">
        <el-row class="detail-row">
          <el-col :span="8" class="label-col">签名</el-col>
          <el-col :span="16" class="value-col">{{ dataList.single }}</el-col>
        </el-row>
        <el-row class="detail-row">
          <el-col :span="8" class="label-col">所属场馆</el-col>
          <el-col :span="16" class="value-col">{{ dataList.fitnessGym.gymName }}</el-col>
        </el-row>
      </div>
    </div>

    <!-- New Introduction section -->
    <div class="introduction-section">
      <h3>简介</h3>
      <div v-html="dataList.tIntro"></div>
    </div>

    <!-- Stats section and other code remains unchanged -->
    <div class="stats-section">
      <h3>统计信息</h3>
      <el-table :data="statsData" border style="width: 100%">
        <el-table-column prop="label" label="统计项"></el-table-column>
        <el-table-column prop="value" label="数值"></el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
import { selectCommonTeacher } from '@/api/keep/teacher';

export default {
  data() {
    return {
      dataList: {}, // 初始化为一个空对象
      statsData: [] // 统计信息数据
    };
  },
  methods: {
    queryTeacherInfo() {
      const id = this.$route.query.id;
      if (id) {
        selectCommonTeacher(id)
          .then((response) => {
            this.dataList = response.data[0]; // 获取数据并赋值给dataList
            console.log(this.dataList)

          })
          .catch((error) => {
            console.error('Failed to fetch user info:', error);
          });
      }
    },
    generateRandomStats() {
      this.statsData = [
        { label: "本月新增会员", value: Math.floor(Math.random() * 11) }, // 0-10
        { label: "本月付费会员", value: Math.floor(Math.random() * 11) }, // 0-10
        { label: "本月销售", value: Math.floor(Math.random() * 21) }, // 0-20
        { label: "上月销售", value: Math.floor(Math.random() * 21) }, // 0-20
        { label: "本月转化率", value: `${(Math.random() * 100).toFixed(2)}%` },
        { label: "本月上课数", value: Math.floor(Math.random() * 31) }, // 0-30
        { label: "上课预约率", value: `${(Math.random() * 100).toFixed(2)}%` },
      ];
    }
  },
  mounted() {
    this.queryTeacherInfo(); // 在组件挂载后获取教练信息
    this.generateRandomStats(); // 生成随机统计信息
  },
};
</script>

<style scoped>
/* 其他样式保持不变 */
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%;
  margin: 20px auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}

.profile-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.profile-picture {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-right: 20px;
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-name {
  font-size: 18px;
  margin: 10px 0;
  font-weight: bold;
}

.edit-button {
  background-color: #e74c3c;
  color: white;
}

.details-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px; /* Adjusted spacing */
}

.details-column {
  width: 48%;
}

.detail-row {
  margin-bottom: 10px;
}

.label-col {
  text-align: right;
  font-weight: bold;
  color: #606266;
}

.value-col {
  padding-left: 10px;
  line-height: 28px;
}

/* New Introduction Section */
.introduction-section {
  margin-top: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
}

.introduction-section h3 {
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
}

.introduction-section div {
  white-space: pre-wrap;
}

.stats-section {
  margin-top: 20px;
}

.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
